import { useEffect } from "react"
import Link from 'next/link'
import styles from '../styles/Nav.module.css'

const NavBar = ({setMode, mode}) => {
	const handleClick = ()=> {
		setMode((prev) => (prev === 'light' ? 'dark' : 'light'))
		// 主题模式存入storage
		localStorage.setItem('mode', mode === 'light' ? 'dark' : 'light')
	}
	useEffect(() => {
		// 切换主题模式
		if(mode === 'light'){
			document.documentElement.classList.remove('dark')
		}else {
			document.documentElement.classList.add('dark')
		}
	},[mode])
	return (
		<div className={styles.container}>
			<Link href='/'>
				<span className={styles.signature}>GuanXiaoyang</span>
			</Link>
			<nav className={styles.nav}>
				{/* 移动端导航图标 */}
				<Link href='/blog'>
					<span className={`iconfont ${styles.mobile} ${styles.icon}`}>
					            &#xe634;
					</span>
				</Link>
				<Link href='/project'>
				          <span className={`iconfont ${styles.mobile} ${styles.icon}`}>
				            &#xe650;
				          </span>
				</Link>
				
				{/* PC端导航链接 */}
				<Link href='/'>
					<span className={`${styles.link} ${styles.laptop}`}>Me</span>
				</Link>
				<Link href='/blog'>
					<span className={`${styles.link} ${styles.laptop}`}>Blog</span>
				</Link>
				<Link href='/project'>
					<span className={`${styles.link} ${styles.laptop}`}>Projects</span>
				</Link>
				
				{/* 常规链接 */}
				<a href='https://gitee.com/guanxiaoyang' rel='noreferrer' target='_blank' className={`iconfont ${styles.icon}`} >
					&#xe885;
				</a>
				<a href='https://space.bilibili.com/403614184' rel='noreferrer' target='_blank' className={`iconfont ${styles.icon}`} >
					&#xe66d;
				</a>
				<span className={`iconfont ${styles.icon}`} onClick={handleClick}>
				    &#xe635;
				</span>
			</nav>
		</div>
	)
}

export default NavBar